<!-- ignore the following lines, they are not important to this demo -->
<j-demo-description [summary]="summary" [content]="description">
</j-demo-description>


<!-- start to learn the demo from here -->
<label>视口行数：</label>
<j-slider width="200px" min="5" max="30" [(value)]="tableData.viewport.rows">
</j-slider>
（{{tableData.viewport.rows}}）

<label>每次滚动行数：</label>
<j-slider width="200px" min="1" max="20" [(value)]="selectedStep">
</j-slider>
（{{selectedStep}}）

<br>

<j-viewport [viewport]="tableData?.viewport" [step]="selectedStep" [verticalOffset]="42">
    <j-table [data]="tableData" trackRowBy="name" [additionalColumnDefines]="additionalColumnDefines">
    </j-table>
</j-viewport>
